<template>
  <view>
    <u-navbar :is-back="true" title="选中车系车型"></u-navbar>
    <view class="content">
      <view>
        <view class="list">
          <u-empty v-if="!carList.length" mode="list"></u-empty>

          <view v-for="(item,index) in carList" :key="index" class="item boxShadow formBox">
            <view class="item-title">
              品牌/车系：{{ item.brandName }}-{{ item.seriesName }}
            </view>
            <view class="car">车型：{{ item.modelName }}</view>
          </view>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
import {showBrandSeriesModelList} from '@/api/index.js'
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
      listQuery: {
        modelId: ''
      },
      carList: []
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  onLoad(option) {
    let objParam = JSON.parse(option.param);
    console.log(objParam);
    this.listQuery.modelId = objParam.serviceItems;
    this.init()
  },
  methods: {
    init() {
      this.getlist();
    },

    getlist() {
      showBrandSeriesModelList(this.listQuery).then(res => {
        console.log(res);
        console.log(this.listQuery);
        this.carList = res.data;
      });
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  padding-top: 20rpx;

  .searchBox {
    width: 680rpx;
    margin: 20rpx auto;
  }

  .formBox {
    padding: 0 0 20rpx 0;

    .tab-wrapper {
      width: 100%;

      view {
        width: 350rpx;
        height: 98rpx;
        background: #eaf3ff;
        font-size: 24rpx;
        font-weight: 700;
        text-align: left;
        color: #177fff;
        text-align: center;
        line-height: 98rpx;

        &.active {
          font-size: 30rpx;
          background-color: #fff;
        }
      }
    }

    .search-wrapper {
      width: 100%;
      padding: 20rpx;
      box-sizing: border-box;
    }
  }
}

.list {
  width: 100%;
  margin-bottom: 140rpx;

  .item {
    position: relative;
    width: 660rpx;
    background: #ffffff;
    border-radius: 18rpx;
    margin: 23rpx auto;
    padding: 20rpx;
    box-sizing: border-box;

    .color {
      width: 110rpx;
      height: 36rpx;
      opacity: 1;
      background: #177fff;
      border-radius: 6rpx;
      font-size: 24rpx;
      font-weight: 700;
      text-align: center;
      color: #ffffff;
      line-height: 36rpx;
      margin-right: 18rpx;

      &.color1 {
        background: #177fff;
      }

      &.color2 {
        background: #ff6738;
      }

      &.color3 {
        background: #f54170;
      }

      &.color4 {
        background: #2db2ad;
      }
    }
  }

  .item-title {
    font-size: 32rpx;
    color: #444;
    line-height: 70rpx;
  }

  .car {
    font-size: 28rpx;
    color: #666;
    line-height: 60rpx;
  }

  .info {
    font-size: 24rpx;
    font-weight: 500;
    color: #666666;
    line-height: 36rpx;
  }

  .checkbox {
    position: absolute;
    right: 10rpx;
    top: 50%;
    transform: translateY(-50%);
  }
}

.btn-wrapper {
  width: 100%;
  height: 140rpx;
  background: #ffffff;
  position: fixed;
  left: 0;
  bottom: 0;

  .text {
    font-size: 32rpx;
    font-weight: 700;
    color: #177fff;
  }

  .btn {
    width: 410rpx;
    height: 100rpx;
    background: #177fff;
    border-radius: 50rpx;
    text-align: center;
    line-height: 100rpx;
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    line-height: 100rpx;
  }
}
</style>
